import{ Component } from 'react';
import './comment.css'
class Comment extends Component{
    // 属性
    state={
        title: '',
        content: '',
        list: [
            {
                title: '评论人：jack',
                content: '评论内容： 塞班！！！'
            }
        ]
    }
    
    updateTitle = (e) => {
        let title = e.target.value
        this.setState({
            title
        })

    }
    // 计算属性
    updateContent = (e) => {
        this.setState({
            content: e.target.value
        })
    }
    // 添加数据
    publist = () => {
        console.log('state', this.state)
        // 组装数据格式/更新list数据
        const { title, content } = this.state
        let newArr = this.state.list.concat([{ title, content }])
        this.setState({
            list: newArr,
            title:'',
            content:'',
        })

    }
    // 删除
    del = (index) => {
        this.state.list.splice(index, 1)
        this.setState({
            list: this.state.list
        })
    }
    // 批量删除
    delall=(index)=>{
        this.state.list.splice(index)
        this.setState({
            list: this.state.list
        })
        console.log("1111")
    }
    //页面
    render(){
        return(
            // 盒子
            <div className="body">
                {/* 头部 输入框*/}
                <div className='body_h'>
                    <input value={this.state.title} placeholder='请输入评论人' onChange={this.updateTitle} />
                </div> 
                {/* 评论区 */}
                <div >
                    <textarea className="body_con"  value={this.state.content} placeholder='请输入评论内容' onChange={this.updateContent} />
                </div>
                {/* 评论信息展示   */}
                <div className='body_b'>
                    {/* 发表评论按钮 */}
                    <div>
                        <button  className='body_b_t' onClick={this.publist}>发表评论</button>
                        <button onClick={this.delall}>全部删除</button>
                    </div>
                    {/* 评论信息盒 */}
                    <div className='body_b_b'>
                        {/* 单条信息循环 */}
                        <div className='text'>
                            {
                                this.state.list.map((item,index)=>
                                <div key={index} className="hengxing">
                                    <div>
                                        <h3>{item.title}</h3>
                                        <p>{item.content}</p>
                                    </div>
                                    <div className='del'  >
                                        <button onClick={() => this.del(index)}>删除</button>
                                    </div>
                                </div> 
                            )
                            }
                        </div>
                    </div>
                    {/* 共计条数盒子 */}
                    <div className="statistics">共{this.state.list.length}条</div>
                </div> 
            </div>
        )
    }
}
export default Comment